.list-items
  width: 100%
  height: auto
  background-color: #ffffff
  margin-top: 10px
  .list-item
    width: 100%
    min-height: 45px
    &:active
      background-color: #f4f4f4
    .item-content
      width: calc(100% - 20px)
      min-height: 45px
      border-bottom: 0.5px solid #f4f4f4
      margin-left: 10px
      padding-right: 10px
      display: flex
      align-items: center
      .title
        font-size: 1rem
        color: #393a3f
        //font-weight: bold
        flex: 1
      .icon
        width: 15px
        height: 100%
        font-size: .8rem
        color: #999999
        display: flex
        align-items: center
        justify-content: flex-end
      .item-icon
        width: 30px
        height: 100%
        display: flex
        align-items: center
        justify-content: flex-start
        font-size: 1.5rem
        color: #393a3f
      .dot
        width: 6px
        height: 6px
        border-radius: 50%
        background-color: #ff5700
      .badge
        background-color: #f56c6c
        border-radius: 10px
        color: #fff
        display: inline-block
        font-size: 12px
        height: 18px
        line-height: 18px
        padding: 0 6px
        text-align: center
        white-space: nowrap
        border: 1px solid #fff
      .notice
        width: auto
        height: 100%
        display: flex
        align-items: center
        justify-content: flex-end
        padding-right: .5rem
        font-size: .7rem
        color: #999999
        &.success
          color: green
        &.danger
          color: red
        &.warning
          color: darkorange
    &:last-child > .item-content
      border-bottom: none
.hint
  width: calc(100% - 20px)
  height: auto
  font-size: .8rem
  line-height: 1.5rem
  padding: 5px 10px
  color: #999
